<template>
	<view class="page">
		<!-- <navbar title="消息中心" :titleStyle="titleStyle"></navbar>
		<view :style="{height:statusHeight+'px'}"></view>
		<z-tabs :list="tabList" name-key="name" @change="tabsChange" />
		<scroll-view class="scroll-view_H safe-area-inset-bottom" style="height: calc(100vh - 220px);" scroll-y="true">
		</scroll-view> -->

		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<view class="news-info">
					<navbar title="消息中心" :titleStyle="titleStyle"></navbar>
					<view :style="{height:statusHeight+'px'}"></view>
					<z-tabs :list="tabList" name-key="name" @change="tabsChange" />
				</view>
			</template>

			<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->

			<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
			<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
			<template #refresher="{refresherStatus}">
				<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
				<custom-refresher :status="refresherStatus" />
			</template>
			<!-- 自定义没有更多数据view -->
			<template #loadingMoreNoMore>
				<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
				<custom-nomore />
			</template>

			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="news-item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
				<view class="staff-card">
					<view class="left">
						<view class="top">
							<image mode="widthFix" style="width: 34rpx;height: 34rpx;display: block;"
								src="@/static/message-ico.png"></image>
							<text
								style="font-size: 28rpx;color: #323232;font-weight: bold;margin-left: 20rpx;">{{'安全预警'}}
							</text>
						</view>
						<view class="bottom">
							<text style="font-size: 26rpx;color: #323232;">2019-10-11
								23:00/您所管辖的XXX工程XxX区温度XXXJ点/℃C，请及时处理。
							</text>
						</view>
					</view>
				</view>
			</view>
			<template #bottom>
				<view>
					<tab-bar :selected="selected"></tab-bar>
				</view>
			</template>
		</z-paging>



	</view>
</template>

<script>
	import {
		getHeartList,
	} from '@/api/pagesMall'
	import TabBar from "@/components/tabBar.vue"
	import store from '@/store'
	import config from '@/api/config'
	let App = getApp();
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				tabIndex: 0,
				selected: 1,
				statusHeight: 48 + App.globalData.statusBarHeight,
				safeAreaHeight: App.globalData.safeAreaHeight,
				userId: store.state.user.USER_OPENID,
				titleStyle: {
					color: "#ffffff",
					fontWeight: "bold",
					fontSize: "18px"
				},
				tabList: [{
					id: 1,
					name: '未读',
				}, {
					id: 2,
					name: '全部',
				}],
				dataList: [],

			};
		},
		onLoad() {

		},
		onShow() {

		},

		methods: {
			queryList(pageNo, pageSize) {
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					userId: this.userId,
					socialCreditNumber: ''
				}
				let data = []
				this.$refs.paging.complete(data);
				// getHeartList(params).then(res => {
				// 	this.$refs.paging.complete(res.data.records);
				// }).catch(res => {
				// 	this.$refs.paging.complete(false);
				// })

			},
			tabsChange(index) {
				this.tabIndex = index;

			},
		}
	};
</script>

<style lang="scss" scoped>
	.news-item {
		display: flex;
		flex-direction: column;

		.staff-card {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			margin: 10rpx 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;

				.top {
					margin-bottom: 27rpx;
					display: flex;
					align-items: center;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						font-size: 24rpx;
						color: #fff;
						padding: 4rpx 10rpx;
						border-radius: 6rpx;
						background-color: #4F79DC;
					}
				}
			}
		}
	}
</style>